<template>
  <div class="listbody">
    <div v-if="!tableList.length" class="pt_50 flexcenter c_999 nodata">
      暂无数据
    </div>
    <template v-else>
      <div class="flex flexwrapper">
        <div
          class="advbox bg_fff"
          v-for="(item, index) in tableList"
          :key="index"
        >
          <div class="advheader flexrowbetween">
            <span class="c_000 advtitle">{{ item.name }}</span>
            <div class="flex">
              <div
                class="h_btn mr_8 c_000 f-14 flexcenter"
                :class="{ graybg: item.status == 0 }"
              >
                {{ item.status == 1 ? "已开启" : "已禁用" }}
              </div>
              <el-dropdown @command="handleCommand($event, item)">
                <!-- <el-button class="">
                  设置<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button> -->
                <div
                  class="h_btn commhover c_000 f-14 flexcenter"
                  v-hasPermi="['position:set']"
                >
                  设置
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">设置状态</el-dropdown-item>
                  <el-dropdown-item command="b">编辑</el-dropdown-item>
                  <el-dropdown-item command="c"
                    >流量主返现设置</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <div
                class="h_btn commhover c_000 f-14 flexcenter"
                @click="handleSet(item)"
              >
                设置
              </div> -->
            </div>
          </div>
          <div class="p_10 contentbody">
            <div class="textitem c_000 f-14 mb_5">
              <span class="f-13 f_weight">特点：</span>
              {{ item.msg }}
            </div>
            <div class="textitem c_000 f-14 mb_5">
              <span class="f-13 f_weight">操作配合：</span>
              {{ item.text }}
            </div>
            <div class="textitem c_000 f-14 mb_5">
              <span class="f-13 f_weight">收费标准：</span>
            </div>
            <div class="textitem c_000 f-14 mb_5">
              <span class="f-13 f_weight">千次展示付费：</span>
              一类城市千次曝光{{
                item.coin_ecpm_province
              }}广告币，二类城市千次曝光{{
                item.coin_ecpm_city
              }}广告币，三类城市千次曝光{{
                item.coin_ecpm_area
              }}广告币，不限城市千次曝光{{ item.coin_ecpm_all }}广告币。
            </div>
            <div class="textitem c_000 f-14 mb_5">
              <span class="f-13 f_weight">固定广告位展示付费：</span>
              每日{{ item.coin_lock }}广告币
            </div>
            <div class="textitem c_000 f-14 mb_15">
              <span class="f-13 f_weight">点击付费：</span>
              一千次{{ item.coin_click }}个广告币
            </div>
            <div class="flex f-14">
              <div class="flex flexwrapper">
                <span class="f-13 f_weight">图标缩略图：</span>
                <img :src="item.icon" alt="" class="icon_img" />
              </div>
              <div class="flex justifycenter flex1">
                <span class="f-13 f_weight pl_5">投放版位缩略图：</span>
                <img :src="item.position_photo" alt="" class="icon_img2" />
              </div>
              <div class="flex justifycenter flex1">
                <span class="f-13 f_weight pl_5">位置缩略图：</span>
                <img :src="item.photo" alt="" class="icon_img2" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="flexcenter m_10 f-13 c_999" v-if="isFinsh">已经到底了</div>
      <div v-else class="flexcenter m_10 mb_0">
        <div v-if="loading" class="c_999">
          <i class="el-icon-loading"></i> 加载中
        </div>
        <div v-else class="more commhover f-13" @click="more">加载更多</div>
      </div>
    </template>

    <el-dialog
      title="广告设置"
      :visible.sync="open"
      width="580px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
      class="commdia"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="广告位状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">开启广告位</el-radio>
            <el-radio :label="0">关闭广告位</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示区状态" prop="display_status">
          <el-radio-group v-model="form.display_status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="JS组件：" prop="js_text">
          <el-input
            v-model="form.js_text"
            type="textarea"
            rows="5"
            placeholder="请输入js组件"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="流量主返现设置"
      :visible.sync="opencash"
      width="580px"
      :before-close="handleCloseCash"
      :close-on-click-modal="false"
      append-to-body
      class="commdia"
    >
      <el-form
        ref="formcash"
        :model="formcash"
        :rules="rulescash"
        label-position="left"
        label-width="170px"
      >
        <el-form-item label="千次展示付费：" prop="master_coin_ecpm">
          <span class="cost_text f-15 c_000">{{ info.coin_ecpm_all }}</span>
          <span class="cost_info f-15 c_000">返点</span>
          <el-input
            v-model="formcash.master_coin_ecpm"
            size="small"
            type="number"
            min="0"
            max="10000"
            placeholder="请输入"
            class="mr_10"
            style="width: 120px"
          />
          %
        </el-form-item>
        <el-form-item label="固定广告位展示付费：" prop="master_coin_lock">
          <span class="cost_text f-15 c_000">{{ info.coin_lock }}</span>
          <span class="cost_info f-15 c_000">返点</span>
          <el-input
            v-model="formcash.master_coin_lock"
            size="small"
            type="number"
            min="0"
            max="10000"
            placeholder="请输入"
            class="mr_10"
            style="width: 120px"
          />
          %
        </el-form-item>
        <el-form-item label="点击付费：" prop="master_coin_click">
          <span class="cost_text f-15 c_000">{{ info.coin_click }}</span>
          <span class="cost_info f-15 c_000">返点</span>
          <el-input
            v-model="formcash.master_coin_click"
            size="small"
            type="number"
            min="0"
            max="10000"
            placeholder="请输入"
            class="mr_10"
            style="width: 120px"
          />
          %
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseCash">取 消</el-button>
        <el-button type="primary" @click="onsubmitCash">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  positionIndex,
  positionEditStatus,
  trafficCashbackSet,
} from "@/api/flow";
import { validNumber } from "@/utils/validate";
export default {
  data() {
    return {
      tableList: [],
      total: 0,
      isFinsh: false,
      queryParams: {
        page: 1,
        num: 10,
        plate_id: "",
      },
      open: false,
      loading: false,
      form: {
        id: "",
        display_status: undefined,
        status: undefined,
        js_text: undefined,
      },
      rules: {
        display_status: [
          { required: true, message: "请选择展示状态", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择广告位状态", trigger: "blur" },
        ],
        js_text: [{ required: true, message: "请填写js组件", trigger: "blur" }],
      },
      opencash: false,
      formcash: {
        id: "",
        master_coin_ecpm: "",
        master_coin_lock: "",
        master_coin_click: "",
      },
      rulescash: {
        master_coin_ecpm: [
          {
            required: true,
            message: "请填写千次展示付费返点",
            trigger: "blur",
          },
          { validator: validNumber, trigger: "blur" },
        ],
        master_coin_lock: [
          {
            required: true,
            message: "请填写固定广告位展示付费返点",
            trigger: "blur",
          },
          { validator: validNumber, trigger: "blur" },
        ],
        master_coin_click: [
          { required: true, message: "请填写点击付费返点", trigger: "blur" },
          { validator: validNumber, trigger: "blur" },
        ],
      },
      info: {
        coin_ecpm_all: "",
        coin_lock: "",
        coin_click: "",
      },
    };
  },
  props: {
    plateId: {
      require: true,
      default: "",
    },
    type: {
      type: String | Number,
      default: 1,
    },
  },
  created() {
    this.queryParams.plate_id = this.plateId;
    this.getList(1);
  },
  methods: {
    getList(page) {
      this.loading = true;
      if (page) {
        this.queryParams.page = 1;
        this.tableList = [];
        this.isFinsh = false;
      }
      positionIndex(this.queryParams)
        .then((res) => {
          this.loading = false;
          this.tableList = this.tableList.concat(
            res.data.list.map((item) => {
              item.icon = item.icon.startsWith("http")
                ? item.icon
                : this.domain + "/" + item.icon;
              item.photo = item.photo.startsWith("http")
                ? item.photo
                : this.domain + "/" + item.photo;
              item.position_photo = item.position_photo.startsWith("http")
                ? item.position_photo
                : this.domain + "/" + item.position_photo;
              return item;
            })
          );
          this.total = res.data.count;
          if (res.data.pagecount == this.queryParams.page) {
            this.isFinsh = true;
          }
        })
        .catch((e) => {
          this.loading = false;
        });
    },

    more() {
      if (!this.loading) {
        this.queryParams.page++;
        this.getList();
      }
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList(1);
    },

    handleCommand(val, item) {
      console.log("item:", item);
      switch (val) {
        case "a":
          this.handleSet(item);
          break;
        case "b":
          this.$emit("edit", item);
          break;
        case "c":
          this.info.coin_ecpm_all = item.coin_ecpm_all;
          this.info.coin_lock = item.coin_lock;
          this.info.coin_click = item.coin_click;
          this.formcash.id = item.id;
          this.formcash.master_coin_click = item.master_coin_click;
          this.formcash.master_coin_ecpm = item.master_coin_ecpm;
          this.formcash.master_coin_lock = item.master_coin_lock;
          this.opencash = true;
          break;
      }
    },

    handleSet(item) {
      this.form.id = item.id;
      this.form.status = item.status;
      this.form.display_status = item.display_status;
      this.form.js_text = item.js_text
      this.open = true;
    },

    handleClose() {
      this.open = false;
    },

    onsubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        positionEditStatus(this.form).then((res) => {
          this.$message.success("设置成功");
          this.getList(1);
          this.handleClose();
        });
      });
    },

    handleCloseCash() {
      this.$refs.formcash.resetFields();
      this.opencash = false;
      this.formcash.id = undefined;
    },

    onsubmitCash() {
      this.$refs.formcash.validate((valid) => {
        if (!valid) return;
        trafficCashbackSet(this.formcash).then((res) => {
          this.$message.success("设置成功");
          this.getList(1);
          this.handleCloseCash();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.listbody {
  height: 100%;
}
.advbox {
  width: 532px;
  height: 400px;
  margin: 20px;
  margin-top: 0;
}
.advheader {
  width: 100%;
  padding: 10px 15px;
  background-color: #d0e3ff;
}
.h_btn {
  width: 70px;
  height: 32px;
  border-radius: 4px;
  background-color: #fff;
}
.textitem {
  line-height: 20px;
}
.icon_img {
  width: 32px;
  height: 32px;
}
.icon_img2 {
  width: 60px;
  height: 115px;
}
.contentbody {
  height: 348px;
  overflow-y: auto;
  padding-left: 15px;
}
.nodata {
  height: 100%;
}
.graybg {
  background-color: #ebebeb;
  color: #6e6c6c;
}
.advtitle {
  display: inline-block;
  max-width: calc(100% - 160px);
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-form-item {
  margin-bottom: 18px;
}
.cost_text {
  display: inline-block;
  width: 60px;
}
.cost_info {
  display: inline-block;
  width: 60px;
}
</style>
